<HTML>
 <HEAD>
  <TITLE>输入内容自动保存</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();//使用HtmlEditor之前必须初始化提示
		var note = new Ext.panel.Panel({
			title:'网络记事本',
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			frame : true,
			width : 520,
			layout:'fit',
			tbar : [
				{
					text : '保存',
					//点击保存按钮即时执行保存操作不进行延时
					handler : saveNode
				},
				'-',
				'最近保存时间：',
				'<div id="saveTime" style="width:100px"></div>',
				'状态：',
				'<div id="saveStatus" style="width:80px"></div>'
			],
			items : [
				new Ext.form.field.HtmlEditor({
					id : 'content',
					height : 150,
					width : 500,
					fontFamilies : ['宋体','隶书','黑体'],//字体列表
					listeners : {
						//sync事件将在文本发生变化时被触发
						sync  : editorChange
					}
				})
			]
		});
		
		//定义HtmlEditor输入内容发生变化时的处理函数
		function editorChange() {
			//文本变化后延时3000毫秒执行保存操作
			task.delay(3000);
		}
		//将保存操作转换为一个延时任务
		var task = new Ext.util.DelayedTask(saveNode);
		//定义保存文本内容的函数
		function saveNode() {
			
			//取得HtmlEditor组件的引用
			var editor = Ext.getCmp('content');
			
			//取得页面中id为saveTime元素的加载器
			var timeLoader = Ext.get('saveTime').getLoader();
			
			timeLoader.load({
				url : 'noteServer.jsp',
				method : 'POST',
				params : {
					//将文本内容作为参数传递到后台服务器
					content : editor.getValue()
				},
				callback : function(loader, success, response, options){
					//取得页面中id为saveStatus元素的引用
					var saveStatus = Ext.get('saveStatus');
					if(success == true){
						saveStatus.update("<font color='green'>保存成功</font>");
					}else{
						saveStatus.update("<font color='red'>保存失败</font>");
					}
				}
			});
		}
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
	<div id='webNote' style="width:522"/>
 </BODY>
</HTML>